<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
 String path = request.getContextPath();
 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
 //JSON.stringify
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta charset="utf-8">
  <title>Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
  <link rel="stylesheet" href="<%=path%>/source/CSS/layui.css" media="all">
</head>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.4.0/jquery.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.11.1.min.js"></script>
<script>
	


	$(document).ready(function(){
		
		// 全部删除
		/*选择id=userTbody元素下所有样式名含有myClz的标签,并添加click事件
		 *当点击后,向上一级找到tr元素，然后删除
		*/
		$('#userTbody').on('click', ".myClz", function () {
			$(this).closest('tr').remove();
	        var col = $(this).parent().parent().find('td');
			var id = col.eq(0).text();
			var catid = col.eq(1).text();
		    window.location.href='DoDao?type=ProductDel&id='+id+'&catid='+catid;
		});
		$('#userTbody').on('click', ".modify", function () {
			var col = $(this).parent().parent().find('td');
			var id = col.eq(0).text();
			var catid = col.eq(1).text();
		    window.location.href='PageDao?action=ProdUp&id='+id+'&catid='+catid;
		});
		
		$("#btn_submit").click(function () {
		    // 获取用户输入的值
		    var id = $("#id").val();
		    var classid = $("#classid").val();
		    var title = $("#title").val();
		    var price = $("#price").val();
		    var specifications = $("#scale").val();
		    var place = $("#place").val();
		    var alcohol = $("#alcohol").val();
		    var photo = $("#pic").val();
		    var content = $("#info").val();
		    var tr = "<tr><td class='id'>" + id + "</td><td class='classid'>" + classid + "</td><td class='title'>" + title + "</td><td class='price'>" + price + "</td><td class='specifications'>" + specifications + "</td><td class='place'>" + place +
		    "</td><td class='alcohol'>" + alcohol + "</td><td class='photo'><img style='width:50px;height:50px' src='" + photo + "'></td><td class='content'>" + content 
		      + "</td><td><button href='#' class='myClz'>删除</button><button class='modify'>修改</button></td></tr>";
		    $("#userTbody").append(tr);
		  });
		
	    $.ajax({
	        url:"ProductM",
	        type:"GET",
	        dataType:"JSON",
	        data:{},
	        contentType:"application/json;charset=utf-8",
	        success:function(data){
	            for(i in data.data) //data.data指的是数组，数组里是8个对象，i为数组的索引
	            {
	                var tr;
	                tr='<td>'+data.data[i].iD+'</td>'+'<td>'+data.data[i].classID+'</td>'+'<td>'+data.data[i].title+'</td>'+
	                '<td>'+data.data[i].price+'</td>'+'<td>'+data.data[i].scale+'</td>'+'<td>'+data.data[i].place+'</td>'+
	                '<td>'+data.data[i].alcohol+'</td>'+'<td><img style="width:50px;height:50px"src="'+data.data[i].pic+'">'+'</td>'+'<td>'+data.data[i].content+'</td>'+
	                "<td><button class='modify layui-btn layui-btn-warm'>修改</button><button class='myClz layui-btn layui-btn-danger'>删除</button></td>"
	                $("#tabletest").append('<tr align="center">'+tr+'</tr>')
	            }
	       	},    
       });
	    
    });
	


</script>

<body>


	
	
	
	<div style="padding: 20px; background-color: #F2F2F2; padding-left:5%;">
      <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
          <div class="layui-card">
            <div class="layui-card-body">
        	<center>
				<form name="userForm" action="<%=request.getContextPath() %>/servlet/DoDao?type=ProductAdd" method="post">
				    <center>
				      <h1><b>产品管理</b></h1>
				      <br />
				      
		        	  <div class="layui-form-item">
		        	  	<label class="layui-form-label">ID:</label>
					    <div class="layui-input-inline" align="center">
				      		<input id="id" type="text" name="id" required  lay-verify="required"  autocomplete="off" class="layui-input">
					  	</div>
			        	<label class="layui-form-label">酒名:</label>
					    <div class="layui-input-inline" align="center">
				      		<input id="title" type="text" name="title" required  lay-verify="required"  autocomplete="off" class="layui-input">
					  	</div>
					    <label class="layui-form-label">类别ID:</label>
					    <div class="layui-input-inline" align="center">
				      		<input id="classid" type="text" name="classid" required  lay-verify="required"  autocomplete="off" class="layui-input">
					  	</div>
					  	<label class="layui-form-label">价格:</label>
					    <div class="layui-input-inline" align="center">
				      		<input id="price" type="text" name="price" required  lay-verify="required"  autocomplete="off" class="layui-input">
					  	</div>

 						<label class="layui-form-label">规格:</label>
					    <div class="layui-input-inline" align="center">
				      		<input id="scale" type="text" name="scale" required  lay-verify="required"  autocomplete="off" class="layui-input">
					  	</div>
					  	

			
					  </div>
  		        	  <div class="layui-form-item">
	  	 	 		    <label class="layui-form-label">产地:</label>
					    <div class="layui-input-inline" align="center">
				      		<input id="place" type="text" name="place" required  lay-verify="required"  autocomplete="off" class="layui-input">
					  	</div>
					  	
					  	<label class="layui-form-label">酒精度:</label>
					    <div class="layui-input-inline" align="center">
				      		<input id="alcohol" type="text" name="alcohol" required  lay-verify="required"  autocomplete="off" class="layui-input">
					  	</div>
					  	
					  	<label class="layui-form-label">图片路径:</label>
					    <div class="layui-input-inline" align="center">
				      		<input id="pic" type="text" name="pic" required  lay-verify="required"  autocomplete="off" class="layui-input">
					  	</div>
					  	
					  	<label class="layui-form-label">简介:</label>
					    <div class="layui-input-inline" align="center">
				      		<input id="info" type="text" name="info" required  lay-verify="required"  autocomplete="off" class="layui-input">
					  	</div>
					  	
					  	<input type="submit" value="添加" id="btn_submit" style="margin-left:10px" class="layui-btn"/>
  		        	  </div>
					  
				    </center>
			    </form>
				
				
				<table class="layui-table" id='tabletest' >
					 <thead>
					 	<tr bgcolor="CCCCCC" align="center">
					        <td>产品ID</td>
					        <td>分类ID</td>
					        <td>名称</td>
					        <td>价格</td>
					        <td>规格</td>
					        <td>产地</td>
					        <td>酒精度</td>
					        <td>图片</td>
					        <td>简介</td>
					        <td>操作</td>
					    </tr>
				    </thead>
			        <tbody id="userTbody" >
				      <tr align="center">
				        <td>XXX</td>
				        <td>XXX</td>
				        <td>酒名</td>
				        <td>两位小数</td>
				        <td>毫升</td>
				        <td>地名</td>
				        <td>百分比</td>
				        <td>xxx.jpg</td>
				        <td>简介</td>
				        <td>
				          <button class="layui-btn layui-btn-warm">修改</button>
				          <button class="layui-btn layui-btn-danger">删除</button>
				        </td>
				      </tr>
    				</tbody>
			 	</table>
			 	
				 
			</center>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="<%=path%>/source/JS/layui.js"></script>
</body>
</html>